{$layout}
{$template "user_menu"}

<form class="ui form" method="post" data-tea-action="$" data-tea-success="success">
	<csrf-token></csrf-token>
    <input type="hidden" name="userId" :value="user.id"/>
	<table class="ui table definition selectable">
        <tr>
            <td class="title">用户名 *</td>
            <td>
                <input type="text" name="username" maxlength="100" ref="focus" v-model="user.username"/>
                <p class="comment">用户名只能是英文、数字、下划线的组合。</p>
            </td>
        </tr>
        <tr>
            <td>密码</td>
            <td>
                <div>
                    <a href="" @click.prevent="changePasswordEditing">修改密码<i class="icon angle" :class="{down:!passwordEditing, up:passwordEditing}"></i></a>
                </div>

                <div v-show="passwordEditing" style="margin-top: 0.6em">
                    <input type="password" name="pass1" maxlength="100"/>
                    <p class="comment">留空表示不修改。</p>
                </div>
            </td>
        </tr>
        <tr v-show="passwordEditing">
            <td>确认密码</td>
            <td>
                <input type="password" name="pass2" maxlength="100"/>
            </td>
        </tr>
        <tr>
            <td>全名 *</td>
            <td>
                <input type="text" name="fullname" maxlength="100" v-model="user.fullname"/>
                <p class="comment">用户姓名或者公司名称等等。</p>
            </td>
        </tr>
        <tr>
            <td>关联集群 *</td>
            <td>
                <cluster-selector :v-cluster-id="clusterId"></cluster-selector>
                <p class="comment">用户发布的网站会自动部署到此集群，修改此选项会同步修改当前用户下的所有服务，但不影响和套餐绑定的服务。</p>
            </td>
        </tr>
        <tr>
            <td colspan="2"><more-options-indicator></more-options-indicator></td>
        </tr>
        <tbody v-show="moreOptionsVisible">
            <tr>
                <td>手机号</td>
                <td>
                    <input type="text" name="mobile" maxlength="11" v-model="user.mobile"/>
                </td>
            </tr>
            <tr>
                <td>联系电话</td>
                <td>
                    <input type="text" name="tel" maxlength="100" v-model="user.tel"/>
                </td>
            </tr>
            <tr>
                <td>电子邮箱</td>
                <td>
                    <input type="text" name="email" maxlength="100" v-model="user.email"/>
                </td>
            </tr>
            <tr>
                <td>OTP认证</td>
                <td>
                    <checkbox name="otpOn" v-model="user.otpLoginIsOn">启用OTP</checkbox>
                    <p class="comment">启用OTP认证后，在用户登录的时候需要同时填写OTP动态密码。</p>
                </td>
            </tr>
            <tr>
                <td>备注</td>
                <td>
                    <textarea rows="3" name="remark" v-model="user.remark"></textarea>
                </td>
            </tr>
            <tr>
                <td>带宽算法</td>
                <td>
                    <select class="ui dropdown auto-width" name="bandwidthAlgo" v-model="user.bandwidthAlgo">
                        <option value="">[使用默认]</option>
                        <option value="secondly">峰值带宽</option>
                        <option value="avg">平均带宽</option>
                    </select>
                    <p class="comment" v-if="user.bandwidthAlgo == 'secondly'">按在计时时间段内（5分钟）最高带宽峰值计算，比如5分钟内最高的某个时间点带宽为100Mbps，那么就认为此时间段内的峰值带宽为100Mbps。</p>
                    <p class="comment" v-if="user.bandwidthAlgo == 'avg'">按在计时时间段内（5分钟）平均带宽计算，即此时间段内的总流量除以时间段的秒数，比如5分钟（300秒）内总流量600MB，那么带宽即为<code-label>600MB * 8bit/300s = 16Mbps</code-label>；通常平均带宽算法要比峰值带宽要少很多。</p>
                </td>
            </tr>
            <tr>
                <td>启用当前用户</td>
                <td>
                    <checkbox name="isOn" v-model="user.isOn"></checkbox>
                </td>
            </tr>
        </tbody>
	</table>
	<submit-btn></submit-btn>
</form>